<template>
  <div class="register-container">
    <header class="register-header" :style="{ top: computedTop() }">
		<image src="https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/logo.png" />
		<div class="title">迎新开卡礼</div>
		<div class="desc">首次绑定成功即可</div>
		<div class="desc">领取融华荟为您准备的好</div>
	</header>
	
	<footer class="register-footer" :style="{ bottom: computedBottom() }">
		<button
		  class="auth-btn"
		  type="primary"
		  open-type="getPhoneNumber"
		  @getphonenumber="getPhoneNumber"
		>
		  授权登录
		</button>
	</footer>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {useLogin} from '@/hooks/useLogin';
import {useToast} from '@/hooks/useToast';
import {useRouter} from '@/hooks/useRouter';
import {useSystemInfo} from '@/hooks/useSystemInfo';

const {success, info} = useToast();
const {bindPhone} = useLogin();
const router = useRouter();
const { getSafeBottom, getSafeTop } = useSystemInfo();

const computedTop = () => {
	return `${getSafeTop() + 48}px`
}

const computedBottom = () => {
	return `${getSafeBottom()}px`
}

const getPhoneNumber = async (e: any) => {
  if (e?.detail?.code) {
    await bindPhone(e.detail.code);
    success('绑定手机号成功');
    router.back();
  } else {
    info('绑定失败');
  }
};
</script>

<style lang="less" scoped>
.register-container {
  width: 100vw;
  height: 100vh;
  background: url('https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/index.png') no-repeat;
  background-size: cover;
  .register-header {
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  color: #fff;
	  > image {
		  width: 276px;
		  height: 46px;
	  }
	  
	  .title {
		  margin: 18px 2px 24px 2px;
		  text-align: center;
		  &::before {
			content: '';
			display: inline-block;
			width: 28px;
			height: 6px;
			background: url('https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/left.png') no-repeat;
			background-size: 100% 100%;
		  }
		  &::after {
			content: '';
			display: inline-block;
			width: 28px;
			height: 6px;
			background: url('https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/right.png') no-repeat;
			background-size: 100% 100%;
		  }
	  }
	  
	  .desc {
		  text-align: center;
		  font-size: 18px;
		  font-weight: 300;
		  line-height: 1.5;
	  }
  }
  .register-footer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	.auth-btn {
	  width: 341px;
	  height: 46px;
	  line-height: 46px;
	  background: rgba(40,40,40,0.3);
	  border: 1px solid #979797;
	  backdrop-filter: blur(3px);
	  border-radius: 0;
	  font-size: 14px;
	  color: #fff;
	}  
  }
}
</style>
